<template>
    <div class="main">
<!--        <div class="button-div">-->
<!--            <div class="daily-statistics">-->
<!--                <button-->
<!--                    v-for="(button, index) in buttons.slice(0, 1)"-->
<!--                    :key="index"-->
<!--                    :class="['custom-button', { 'selected': button.selected }]"-->
<!--                    @click="selectButton(button.index)"-->
<!--                >-->
<!--                    {{ button.label }}-->
<!--                </button>-->
<!--                <div v-if="orientationBool" class="daily-statistics-options">-->
<!--                    <span class="orientation">-->
<!--                        <div-->
<!--                            v-for="(item, index) in orientationOption"-->
<!--                            :key="index"-->
<!--                            :class="['item', { 'selected': item.selected }]"-->
<!--                            @click="selectOrientation(index)"-->
<!--                        >{{ item.label }}</div>-->
<!--                    </span>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="monthly-yearly-statistics">-->
<!--                <button-->
<!--                    v-for="(button, index) in buttons.slice(1)"-->
<!--                    :key="index"-->
<!--                    :class="['custom-button', { 'selected': button.selected }]"-->
<!--                    @click="selectButton(button.index)"-->
<!--                >-->
<!--                    {{ button.label }}-->
<!--                </button>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div>123</div>-->
        <Echart  id="centerBottom" :options="options" class="left_center_inner" v-if="pageflag == 1" ref="charts1" />
        <Echart  id="centerBottom2" :options="options2" class="left_center_inner" v-if="pageflag == 2" ref="charts2" />
        <Echart  id="centerBottom2" :options="options3" class="left_center_inner" v-if="pageflag == 3" ref="charts3" />
    </div>
</template>

<script>
import {currentGET} from "api";
export default {
    data() {
        return {
            ProvDayData: [],
            ProvMonthData: [],
            ProvYearData: [],
            buttons: [
                {label: '日统计', selected: false, index: 0},
                {label: '月统计', selected: true, index: 1},
                {label: '年统计', selected: false, index: 2}
            ],
            orientationOption: [
                {label: '竖向', selected: true},
                {label: '横向', selected: false},
            ],
            orientationBool: false,
            options: {
                color: '#8ebfe8', // 设置柱子的颜色
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: '#FFF', // 设置 X 轴字体的颜色
                            fontSize: 12 // 设置 X 轴字体的大小
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#FFF', // 设置 X 轴字体的颜色
                            fontSize: 12 // 设置 X 轴字体的大小
                        }
                    },
                    splitLine: {
                        show: true, // 显示 y 轴的背景横线
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.1)", // 设置颜色为白色，并设置透明度为 0.5
                            type: "solid", // 设置为实线
                        },
                    },
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        barWidth: 20, // 像素值或百分比
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: "{c}" + "人",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        fontWeight: "bolder",
                                        fontSize: "12",
                                        color: "#8ebfe8"
                                    }
                                },
                                opacity: 1
                            }
                        },
                    }
                ],
                // 设置图表的大小
                grid: {
                    width: '96%',
                    height: '75%',
                    left: '3.7%',
                    top: '12%'
                }
            },
            // 横向配置
            options2: {
                color: '#8ebfe8', // 设置柱子的颜色
                xAxis: {
                    type: 'value',
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: '#FFF', // 设置 X 轴字体的颜色
                            fontSize: 12 // 设置 X 轴字体的大小
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        textStyle: {
                            color: '#FFF', // 设置 X 轴字体的颜色
                            fontSize: 12 // 设置 X 轴字体的大小
                        }
                    },
                    splitLine: {
                        show: true, // 显示 y 轴的背景横线
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.1)", // 设置颜色为白色，并设置透明度为 0.5
                            type: "solid", // 设置为实线
                        },
                    },
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        barWidth: 20, // 像素值或百分比
                        showBackground: true,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 20, 20, 0],//柱形图圆角设置
                                label: {
                                    formatter: "{c}" + "人",
                                    show: true,
                                    position: "right",
                                    textStyle: {
                                        fontWeight: "bolder",
                                        fontSize: "12",
                                        color: "#8ebfe8"
                                    }
                                },
                                opacity: 1
                            }
                        },
                    }
                ],
                dataZoom: [
                    {
                        type: "slider",
                        realtime: true, // 拖动时，是否实时更新系列的视图
                        startValue: 0,
                        endValue: 5,
                        width: 15,
                        height: "90%",
                        top: "5%",
                        right: 0,
                        // orient: 'vertical', // 设置横向还是纵向, 但是官方不太建议如此使用，建议使用 yAxisIndex 具体指明
                        yAxisIndex: [0, 1], // 控制y轴滚动对象
                        fillerColor: "#294d72", // 滚动条颜色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        backgroundColor: "#0a2847", //两边未选中的滑动条区域的颜色
                        handleSize: 0, // 两边手柄尺寸
                        showDataShadow: false, //是否显示数据阴影 默认auto
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        zoomLock: true,
                        moveHandleStyle: {
                            opacity: 0,
                        },
                    },
                    {
                        type: "inside",
                        // width: 0,
                        startValue: 0,
                        endValue: 10,
                        minValueSpan: 10,
                        yAxisIndex: [0],
                        zoomOnMouseWheel: false, // 关闭滚轮缩放
                        moveOnMouseWheel: true, // 开启滚轮平移
                        moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
                    },
                ],
                // 设置图表的大小
                grid: {
                    width: '96%',
                    height: '75%',
                    left: '2.1%',
                    top: '12%'
                }
            },
            // 月统计
            options3: {
                color: '#8ebfe8', // 设置柱子的颜色
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: '#FFF', // 设置 X 轴字体的颜色
                            fontSize: 12 // 设置 X 轴字体的大小
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: '#FFF', // 设置 X 轴字体的颜色
                            fontSize: 12 // 设置 X 轴字体的大小
                        }
                    },
                    splitLine: {
                        show: true, // 显示 y 轴的背景横线
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.1)", // 设置颜色为白色，并设置透明度为 0.5
                            type: "solid", // 设置为实线
                        },
                    },
                },
                series: [
                    {
                        name: '2023',
                        data: [],
                        type: 'pictorialBar',
                        symbol: 'rect', // 设置象形柱图的形状为长方形
                        symbolRepeat: true, // 允许图形重复
                        symbolRepeatDirection: 'start', // 图形重复的方向为起始方向，从起点开始
                        symbolSize: [20, 40], // 设置象形柱图的大小，宽度为 20，高度为 40
                        symbolMargin: '0%', // 设置图形之间的间距为 8%
                        barWidth: 20, // 像素值或百分比
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: "{c}" + "人",
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        fontWeight: "bolder",
                                        fontSize: "12",
                                        color: "#8ebfe8"
                                    }
                                },
                                opacity: 1
                            }
                        },
                    },
                    {
                        name: '2024',
                        data: [],
                        type: 'pictorialBar',
                        barWidth: 20, // 像素值或百分比
                        symbol: 'rect', // 设置象形柱图的形状为长方形
                        symbolRepeat: true, // 允许图形重复
                        symbolRepeatDirection: 'start', // 图形重复的方向为起始方向，从起点开始
                        symbolSize: [20, 40], // 设置象形柱图的大小，宽度为 20，高度为 40
                        symbolMargin: '0%', // 设置图形之间的间距为 8%
                        itemStyle: {
                            normal: {
                                color: '#edbe7e',
                                label: {
                                    formatter: function(params) {
                                        if (params.value === 0) {
                                            return ''; // 数据为 0 时不显示标签
                                        } else {
                                            return params.value + ' 人';
                                        }
                                    },
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        fontWeight: 'bolder',
                                        fontSize: 12,
                                        color: '#edbe7e'
                                    }
                                },
                                opacity: 1
                            }
                        }
                    },
                ],
                // 设置图例，用于显示柱状图的系列名称
                legend: {
                    right: 30,
                    top: 0,
                    orient: 'horizontal',
                    textStyle: {
                        color: "#c7e3f9",
                    },
                    icon: 'circle',
                    data: [
                        {
                            name: '2023',
                            icon: 'image://',
                        },
                        {
                            name: '2024',
                            icon:'image://',
                        },
                    ],
                    itemWidth: 12, // 设置图例图标的宽度
                    itemHeight: 12 // 设置图例图标的高度
                },
                // 设置图表的大小
                grid: {
                    width: '93%',
                    height: '60%',
                    left: '7%',
                    top: '25%',
                }
            },
            // 显示隐藏变量
            pageflag: 1,
        };
    },
    created() {
        this.monthlyStatistics();
        // this.dailyStatistics();
        // this.getProvDay();
    },
    mounted() {
        this.$nextTick(() => {
            this.$refs.charts3.chart.on("click", (params) => {
                // console.log(params.seriesName, "params.seriesName");
                // console.log(params.name, "params.name");
                const filteredStr = params.name.replace(/月/g, "");
                console.log(params.seriesName + "-" + filteredStr);
                this.$store.commit('museumInformation/SET_MuseumsSelectedDate', params.seriesName + "-" + filteredStr);
            });
        })
    },
    beforeDestroy() {

    },
    methods: {
        getProvDay() {
            currentGET("getProvDay", {})
                .then((res) => {
                    if (res.success) {
                        this.ProvDayData = res.data;
                        console.log(this.ProvDayData, 'this.ProvDayData');

                        let hours = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];

                        let result = hours.map((hour) => {
                            let obj = this.ProvDayData.find(function(item) {
                                return item.hour === hour;
                            });

                            if (obj) {
                                return obj.value;
                            } else {
                                return 0;
                            }
                        });

                        console.log(result, "result");

                        this.options.series[0].data = result
                        this.options2.series[0].data = result
                    } else {
                        this.pageflag = false;
                        // this.$Message({
                        //     text: res.msg,
                        //     type: "warning",
                        // });
                    }
                })
                .catch((e) => {
                    // this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                });
        },
        getProvMonth() {
            currentGET("getProvMonth", {})
                .then((res) => {
                    if (res.success) {
                        this.ProvMonthData = res.data.splice(-12);
                        console.log(JSON.parse(JSON.stringify(this.ProvMonthData)), 'this.ProvMonthData');

                        // 获取数组中的两个年份
                        var uniqueYears = [...new Set(this.ProvMonthData.map(obj => obj.year))];
                        var year1 = uniqueYears[0];
                        var year2 = uniqueYears[1];

                        var array1 = [];
                        var array2 = [];

                        this.ProvMonthData.forEach(function(obj) {
                            if (obj.year === year1.toString()) {
                                array1.push(obj.value);
                            } else if (obj.year === year2.toString()) {
                                array2.push(obj.value);
                            }
                        });

                        console.log(array1); // 较小年份对应的值数组
                        console.log(array2); // 较大年份对应的值数组

                        // 格式化 month 属性为 xx月 的形式
                        var formattedMonths = this.ProvMonthData.map(function(obj) {
                            return obj.month + "月";
                        });

                        console.log(formattedMonths); // 格式化后的月份数组

                        // 在 array2 开头添加与 array1 长度相同的值为0的元素
                        var array1Length = array1.length;
                        var zerosArray = Array(array1Length).fill(0);
                        array2 = zerosArray.concat(array2);

                        console.log(array2); // 在开头添加0值后的 array2 数组

                        this.options3.series[0].name = year1;
                        this.options3.legend.data[0].name = year1;
                        this.options3.series[0].data = array1;
                        this.options3.series[1].name = year2;
                        this.options3.legend.data[1].name = year2;
                        this.options3.series[1].data = array2;
                        this.options3.xAxis.data = formattedMonths;


                    } else {
                        this.pageflag = false;
                        // this.$Message({
                        //     text: res.msg,
                        //     type: "warning",
                        // });
                    }
                })
                .catch((e) => {
                    // this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                });
        },

        getProvYear() {
            currentGET("getProvYear", {})
                .then((res) => {
                    if (res.success) {
                        this.ProvYearData = res.data;
                        console.log(JSON.parse(JSON.stringify(this.ProvYearData)), 'this.ProvYearData');

                        var years = [];
                        var values = [];

                        this.ProvYearData.forEach(function(obj) {
                            years.push(obj.year);
                            values.push(obj.value);
                        });

                        console.log(years); // 存储所有年份的数组
                        console.log(values); // 存储所有值的数组

                        this.options.series[0].data = values;
                        this.options.xAxis.data = years;

                    } else {
                        this.pageflag = false;
                        // this.$Message({
                        //     text: res.msg,
                        //     type: "warning",
                        // });
                    }
                })
                .catch((e) => {
                    // this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                });
        },
        selectButton(index) {
            console.log(index)
            this.buttons.forEach((button, i) => {
                button.selected = i === index;
            });
            this.orientationBool = false;
            if (index === 0) {
                this.orientationBool = true;
                this.orientationOption.forEach(item => item.selected = false);
                this.orientationOption[0].selected = true;
                this.dailyStatistics();
            } else if (index === 1) {
                this.monthlyStatistics();
            } else if (index === 2) {
                this.yearStatistics();
            }
        },
        // 日统计
        dailyStatistics() {
            this.clearLandscapeFormat();
            // this.options.series[0].data = [1200, 1500, 1700, 1300, 1200, 1300, 1400, 1300, 1400, 1500, 1400, 1200];
            this.options.xAxis.data = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];

            this.getProvDay();
        },
        // 月统计
        monthlyStatistics() {
            // this.clearLandscapeFormat();
            this.pageflag = 3;
            // this.options3.series[0].data = [5000, 7500, 8000, 9000, 9500, 10000, 13000, 14000, 15000];
            // this.options3.series[1].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 16000, 17000, 18000];
            // this.options3.xAxis.data = ["4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月", "1月", "2月", "3月"];
            this.getProvMonth();
        },
        // 年统计
        yearStatistics() {
            this.clearLandscapeFormat();
            // this.options.series[0].data = [12000, 7500, 8000, 9000, 9500, 10000, 13000, 14000, 15000, 16000, 17000];
            // this.options.xAxis.data = ['2019', '2020', '2021', '2022', '2023', '2024'];
            this.getProvYear();
        },

        // 日统计选择方向
        selectOrientation(index) {
            this.orientationOption.forEach((item, i) => {
                item.selected = i === index;
            });
            if (index === 0) {
                this.vertical();
            } else if (index === 1) {
                this.crosswise();
            }
            this.orientationBool = false;
        },

        // 竖向
        vertical() {
            this.clearLandscapeFormat();
            this.options.xAxis.type = 'category';
            this.options.xAxis.yAxis = 'value';
        },
        // 横向
        crosswise() {
            this.pageflag = 2;
            // this.options2.series[0].data = [1200, 1500, 1700, 1300, 1200, 1300, 1400, 1300, 1400, 1500, 1400, 1200];
            this.options2.yAxis.data = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];
            // 计算数据数组中的最大值
            let maxData = Math.max.apply(null, this.options.series[0].data);
            // 添加一个适当的偏移量
            let maxAxis = maxData + 200;
            this.options2.xAxis.max = maxAxis;
        },

        // 清除横向格式
        clearLandscapeFormat(){
            this.pageflag = 1;
        }
    },
};
</script>
<style lang='scss' scoped>
.main {
    position: relative;
    width: 100%;
    height: 205px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 22px 0 0 46px;
}
.primary-button{
  margin-left: 10px;
}
.left_center_inner {
    flex: 1;
    z-index: 50;
    //margin-top: 40px;
    box-sizing: border-box;
}
.button-div {
    z-index: 99;
    position: absolute;
    display: flex;

    .daily-statistics {
        position: relative;

        .custom-button {
            z-index: 100;
            position: absolute;
        }

        .daily-statistics-options {
            position: absolute;
            z-index: 90;
            width: 75px;
            height: 80px;
            border: 1px solid #002450;
            //transform: translate(1px, -10px);
            display: flex;
            flex-direction: column-reverse;

            .orientation {
                width: 100%;
                height: 52px;
                background-image: linear-gradient(to bottom, #2b394d, #03152b);

                .item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 50%;
                    font-size: 12px;


                    &:hover {
                        color: #c8e4fa;
                        transform: scale(1.01);
                    }

                    &.selected {
                        color: #c8e4fa;
                        //transform: scale(1.1);
                    }
                }
            }
        }
    }

    .monthly-yearly-statistics{
        position: relative;
        left: 81px;
    }

    .custom-button {
        background: linear-gradient(to bottom, #3c526d, #091c39);
        width: 50px;
        height: 18px;
        color: white;
        border: none;
        padding: 6px 13px;
        font-size: 12px;
        margin-right: 5px;
        transition: background 0.3s ease, transform 0.3s;
        border-radius: 4px; /* 添加圆角 */
    }
}

.custom-button:hover {
  background: linear-gradient(to bottom, #091c39, #3c526d);
  transform: scale(1.01);
}

.custom-button.selected {
  background: linear-gradient(to bottom, #8aafd4, #13355f);
  //transform: scale(1.1);
}
</style>
